<template>
  <view class="search-input">
    <view class="page-container">
      <view class="flex">
        <view class="input-view flex-1 flex flex-middle">
          <input
            class="input flex-1"
            placeholder="输入关键字搜索"
            confirm-type="search"
            @confirm="confirmSearch"
            v-model="searchVal"
            :focus="focus"
          />
          <view
            class="search-btn flex flex-middle flex-center"
            @click="confirmSearch"
          >
            <u-icon name="search" size="22" color="#fff" />
            搜索
          </view>
        </view>
        <view class="cancel" @click="cancelSearch"> 取消 </view>
      </view>
      <view class="sift-view flex flex-middle" v-show="searchStatus">
        <view
          class="sift-item flex flex-center flex-middle active"
          @click="changeShowType(true)"
        >
          {{ typeList[searchType].name }}
          <u-icon
            class="icon"
            name="arrow-down-fill"
            size="8"
            color="#333333"
          />
        </view>
        <view
          class="sift-item flex flex-center flex-middle"
          :class="{ active: index == siftIndex }"
          v-for="(item, index) in siftList"
          :key="index"
          @click="changeSift(index)"
        >
          {{ item }}
          <u-icon
            class="icon"
            name="arrow-down-fill"
            size="8"
            :color="index == siftIndex ? '#333333' : '#C1C1C1'"
            v-show="index == siftIndex"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    searchLoad: {
      type: Boolean,
      default: false,
    },
    searchStatus: {
      type: Boolean,
      default: false,
    },
    searchType: {
      type: Number,
      default: 0,
    },
    search: {
      type: Function,
      default: () => {},
    },
    cancelSearch: {
      type: Function,
      default: () => {},
    },
    changeShowType: {
      type: Function,
      default: () => {},
    },
    typeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    focus: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      siftIndex: 0,
      siftList: ["智能排序", "评分", "距离"],
      searchVal: "",
    };
  },
  methods: {
    changeSift(index) {
      if (this.searchLoad) return; // 节流
      this.siftIndex = index;
      this.search();
    },
    confirmSearch() {
      if (!this.searchVal) return;
      this.$store.dispatch("addSearchHistory", this.searchVal);
      this.search();
    },
  },
};
</script>

<style scoped lang="scss">
.search-input {
  padding: 16px 16px 6px;
  border-bottom: 1px solid #ccc;

  .search-btn {
    width: 64px;
    height: 26px;
    margin: 0 6px;
    background: #232323;
    border-radius: 26px;
    color: #ffffff;
  }

  .input-view {
    height: 36px;
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.63);
    box-shadow: 0px 1px 9px 0px rgba(204, 218, 236, 0.5);
    border: 1px solid #ffffff;
    backdrop-filter: blur(1px);

    .input {
      margin-left: 16px;
      height: 36px;
      font-size: 14px;
      color: #232323;
    }
  }

  .cancel {
    width: 36px;
    color: #aeaeae;
    height: 36px;
    line-height: 36px;
    text-align: right;
  }
}

.sift-view {
  height: 34px;
  margin-top: 8px;

  .active {
    color: #333333 !important;
  }

  .sift-item {
    height: 34px;
    width: 33.33%;
    color: #c1c1c1;

    .icon {
      margin-left: 4px;
    }
  }
}
</style>